<template>
  <div>
    <el-table
      ref="singleTable"
      v-loading="loading"
      element-loading-text="数据正在加载中"
      :style="{
        width: '100%',
      }"
      size="small"
      v-bind="$attrs"
      cell-class-name="tableCellStyle"
      header-cell-class-name="tableHeaderStyle"
      :header-cell-style="{ background: '#F5F5F5', color: '#606266' }"
      @current-change="handleCurrentChange"
      @selection-change="
        (value) => {
          $emit('selection-change', value);
        }
      "
      @sort-change="
        (value) => {
          $emit('sort-change', value);
        }
      "
      @row-click="$emit('row-click', $event)"
    >
      <slot />
      <slot v-if="$slots.empty" slot="empty" name="empty"></slot>
    </el-table>
    <el-pagination
      v-bind="pagination"
      style="text-align: right; margin-top: 40px"
      :layout="paginationLayout"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      @current-change="handlePageCurrentChange"
      @size-change="handleSizeChange"
      @prev-click="handlePrevClick"
      @next-click="handleNextClick"
    />
  </div>
</template>

<script>
export default {
  name: "ProxyTable",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    pagination: {
      type: Object,
      default() {
        return {};
      },
    },
    needSizes: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    paginationLayout() {
      return `total, ${this.needSizes ? "sizes," : ""} prev, pager, next`;
    },
    pageSize() {
      return this.pagination["page-size"] ? this.pagination["page-size"] : 10;
    },
    pageSizes() {
      return this.pagination["page-sizes"]
        ? this.pagination["page-sizes"]
        : [10, 20, 30, 40, 50];
    },
  },
  methods: {
    // 取消选择
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.singleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.singleTable.clearSelection();
      }
    },
    setCurrentRow(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(...args) {
      this.$emit("current-change", ...args);
    },
    handleSizeChange(...args) {
      this.$emit("page-size-change", ...args);
    },
    handlePageCurrentChange(args) {
      this.$emit("page-current-change", args);
    },
    handlePrevClick(args) {
      this.$emit("prev-click", args);
    },
    handleNextClick(args) {
      this.$emit("next-click", args);
    },
  },
};
</script>

<style scoped lang="scss">
.el-table--small {
  font-size: 14px;
}
</style>
